<template>
  <div>
    App组件
    <p v-for="item in  list " :key="item.id">{{ item.name }}
      <span :style="{ 'color': item.done ? 'green' : 'red' }">
        {{ item.done }}
      </span>
    </p>
    {{ msg }}
    {{ listLength }}
    {{ list2Length }}
    <button @click="handleClick">click me</button>
    <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.duz6S7Fvygrqd6Yj_DcXAQHaF7?rs=1&pid=ImgDetMain" ref="imgs" />
    <button @click="getImgs">点我获取img</button>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';

const msg = ref<string>("nihao")
const list = ref<{
  id: number,
  name: string,
  done: boolean
}[]>([
  { id: 1, name: '抽烟', done: false },
  { id: 2, name: '喝酒', done: true },
  { id: 3, name: '烫头', done: false }
])

type TodoList = {
  id: number,
  name: string,
  done: boolean
}[]

const list2 = ref<TodoList>([
  { id: 1, name: '抽烟', done: false },
  { id: 2, name: '喝酒', done: false },
  { id: 3, name: '烫头', done: false }
])

type Todo = {
  id: number,
  name: string,
  done: boolean
}
const list3 = ref<Todo[]>([
  { id: 1, name: '抽烟', done: false },
  { id: 2, name: '喝酒', done: false },
  { id: 3, name: '烫头', done: false }
])


const listLength = computed<number>(() => {
  return list.value.filter(item => item.done).length
})

const list2Length = computed(() => {
  return list2.value.filter(item => !item.done).length
})

const handleClick = (e: MouseEvent) => {
  console.log(e.pageX, e.pageY);
}

const imgs = ref<HTMLImageElement | null>(null)
document.createElement('img')
const getImgs = () => {
  console.log(imgs.value?.src);
}

</script>

<style scoped></style>
